<template>
  <div class="page">
    <nav-bar title="辖区党建分析" theme="white">
      <template #custom>
        <img
          src="../../../assets/images/cockpit/home/status-bar-search.png"
          class="iconimg"
          alt=""
          @click="handleScreen"
        />
      </template>
    </nav-bar>
    <div style="margin-top: 44px"></div>
    <div class="real-population">
      <div class="real-population-left"></div>
      <div class="real-population-center">
        <p>党员统计</p>
      </div>
      <div class="real-population-right">
        <p>
          <span class="real-population-right-num">{{ personData.total }}</span>
          人
        </p>
      </div>
    </div>
    <div
      class="population-total"
      @click="$router.push(`/cockpit/analyse/personlist?regionCode=${formdata.regionCode}`)"
    >
      <div class="population-total-chart">
        <div class="population-total-chart-top">
          <p>
            <span class="population-total-chart-top-left">{{ personData.officialName }}</span>
            <span class="population-total-chart-top-right">{{ personData.probationaryName }}</span>
          </p>
        </div>
        <div class="population-total-chart-center">
          <div class="population-total-chart-center-item1" :style="'width:' + boxWidth1"></div>
          <div class="population-total-chart-center-item2" :style="'width:' + boxWidth2"></div>
        </div>
        <div class="population-total-chart-bottom">
          <span class="population-total-chart-bottom-left">
            {{ personData.official + '(' + boxNum1 + ')' }}
          </span>
          <span class="population-total-chart-bottom-right">
            {{ personData.probationary + '(' + boxNum2 + ')' }}
          </span>
        </div>
      </div>
    </div>
    <div class="interlayer"></div>
    <div class="key-population">
      <div class="key-population-left"></div>
      <div class="key-population-center">
        <p v-if="flag">各街道党员统计</p>
        <p v-if="!flag">各社区党员统计</p>
      </div>
    </div>
    <div class="key-population-box" id="region2">
      <BarX
        :value="personregionData"
        :gradient="false"
        :barWidth="8"
        :dataZoom="regionDataZoom2"
        :legend="{ show: false, bottom: 0 }"
        :grid="{ top: '5%', left: '3%', right: '5%', bottom: '8%' }"
        :tooltipStyle="{ backgroundColor: '#FFFFFF', borderColor: '#FFFFFF' }"
        @handleChange="handleChange"
      ></BarX>
    </div>
    <div class="organization-population">
      <div class="organization-population-left"></div>
      <div class="organization-population-center">
        <p>党组织统计</p>
      </div>
      <div class="organization-population-right">
        <p>
          <span class="organization-population-right-num">{{ organizationData.total }}</span>
        </p>
      </div>
    </div>
    <div
      class="organization-total"
      :style="{ height: organizationtypeData.category.length * 50 + 'px' }"
      @click="$router.push(`/cockpit/analyse/organizationlist?regionCode=${formdata.regionCode}`)"
    >
      <BarHorizontalRank :value="organizationtypeData"></BarHorizontalRank>
    </div>
    <div class="interlayer"></div>
    <div class="organization-population">
      <div class="organization-population-left"></div>
      <div class="organization-population-center">
        <p v-if="flag">各街道党组织统计</p>
        <p v-if="!flag">各社区党组织统计</p>
      </div>
    </div>
    <div class="event-overview-ranking">
      <div class="event-overview-ranking-table">
        <table v-if="organizationlistData.length">
          <thead>
            <tr class="table-thead">
              <th>地区</th>
              <th>党委</th>
              <th>党组织</th>
              <th>党支部</th>
              <th>联合党支部</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in organizationlistData" :key="index" @click="changeRegion(item)">
              <td>{{ item.regionName }}</td>
              <td>{{ item.dangwei }}</td>
              <td>{{ item.dangzongzhibu }}</td>
              <td>{{ item.dangzhibu }}</td>
              <td>{{ item.lianhedangzhibu }}</td>
            </tr>
          </tbody>
        </table>
        <div class="nodata" v-else>暂无数据</div>
      </div>
    </div>
    <model-evet ref="urbanPage" @alleventSerch="eventSerchClick"></model-evet>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { BarHorizontalRank, BarX } from '@/components/Chart'
import ModelEvet from '../../../components/Widget/Cockpit/EventOverview/Model'
import Cockpit from '@/api/cockpit'
export default {
  components: {
    ModelEvet,
    BarHorizontalRank,
    BarX
  },
  data() {
    return {
      personData: [],
      boxWidth1: '170px',
      boxWidth2: '170px',
      boxNum1: '',
      boxNum2: '',
      personregionData: {},
      organizationtypeData: {},
      organizationlistData: [],
      organizationData: {
        category: [],
        list: []
      },
      formdata: {
        regionCode: ''
      },
      regionDataZoom2: [
        {
          type: 'inside',
          show: true,
          xAxisIndex: [0],
          startValue: 0,
          zoomLock: true,
          endValue: 2
        }
      ],
      regionTimer2: null,
      flag: true
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  created() {
    this.formdata.regionCode = this.user.regionCode
    this.persontype()
    this.personregion()
    this.organizationtype()
    this.organizationlist()
    this.setRegionDataZoom2()
    document.getElementById('region2').addEventListener('mouseover', () => {
      if (this.regionTimer2) {
        clearInterval(this.regionTimer2)
        this.regionTimer2 = null
      }
    })
    document.getElementById('region2').addEventListener('mouseout', () => {
      this.setRegionDataZoom2()
    })
  },
  mounted() {},
  methods: {
    handleChange(index) {
      if (this.personregionData.regionCode[index].length <= 9) {
        this.flag = false
        this.formdata.regionCode = this.personregionData.regionCode[index]
        this.persontype()
        this.personregion()
        this.organizationtype()
        this.organizationlist()
      }
    },
    changeRegion(item) {
      if (item.regionCode.length <= 9) {
        this.flag = false
        this.formdata.regionCode = item.regionCode
        this.persontype()
        this.personregion()
        this.organizationtype()
        this.organizationlist()
      }
    },
    setRegionDataZoom2() {
      this.regionTimer2 = setInterval(() => {
        const len = this.personregionData.category.length - 1
        const startValue = this.regionDataZoom2[0].startValue
        const endValue = this.regionDataZoom2[0].endValue
        if (endValue >= len) {
          this.regionDataZoom2[0].startValue = 0
          this.regionDataZoom2[0].endValue = 2
        } else if (startValue < len && startValue + 1 >= len) {
          this.regionDataZoom2[0].startValue += 1
          this.regionDataZoom2[0].endValue = len
        } else {
          this.regionDataZoom2[0].startValue += 1
          this.regionDataZoom2[0].endValue += 1
        }
      }, 3000)
    },
    // 点击筛选
    handleScreen() {
      this.$refs.urbanPage.popUpshow = true
      this.$refs.urbanPage.eventShow = false
    },
    eventSerchClick(msg) {
      this.formdata.regionCode = msg.communityRegion
      this.persontype()
      this.personregion()
      this.organizationtype()
      this.organizationlist()
    },
    persontype() {
      Cockpit.Analyse.persontype(this.formdata).then(res => {
        this.personData = res.data.data
        this.boxWidth1 = (this.personData.officialPercent / 100) * 343 + 'px'
        this.boxWidth2 = 343 - (this.personData.officialPercent / 100) * 343 + 'px'
        this.boxNum1 = this.personData.officialPercent.toFixed(2) + '%'
        this.boxNum2 = (100 - this.personData.officialPercent).toFixed(2) + '%'
        if (this.personData.official === 0 && this.personData.probationary === 0) {
          this.boxNum1 = '0%'
          this.boxNum2 = '0%'
          this.boxWidth1 = '170px'
          this.boxWidth2 = '170px'
        }
      })
    },
    personregion() {
      Cockpit.Analyse.personregion(this.formdata).then(res => {
        this.personregionData = res.data.data
      })
    },
    organizationtype() {
      Cockpit.Analyse.organizationtype(this.formdata).then(res => {
        this.organizationtypeData = res.data.data
      })
    },
    organizationlist() {
      Cockpit.Analyse.organizationtregion(this.formdata).then(res => {
        this.organizationlistData = res.data.data
      })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/list.less';
@import '~@/assets/style/cockpit/analyse.less';
</style>
